<template>
	<view class="flex justify-start padding-top" style="width: 100%;">
		<view class="padding-top-xl padding-left-sm" style="height: 200upx;">
			<image
			src="/src/static/zr/back.png"
			mode=""
			style="width: 60upx; height: 60upx;"
			@click="handelBack"
			/>
		</view>
	</view>
	<view class="login-page">
		<!-- 标题区域 -->
		<view class="title-area">
			<text class="title">手机号登录</text>
			<text class="sub-title">未注册的手机号登录成功后将自动注册</text>
		</view>

		<!-- 手机号输入区域 -->
		<view class="input-area">
			<view class="phone-prefix">
				<text>+86</text>
			</view>
			<input type="number" placeholder="请输入手机号" v-model="phoneNumber" class="phone-input"
				@input="handlePhoneInput" />
		</view>

		<!-- 验证码输入区域 -->
		<view class="input-area">
			<input type="number" placeholder="请输入验证码" v-model="verifyCode" class="verify-input" />
			<button class="get-code-btn" :disabled="countdown > 0 || !isPhoneValid" @click="getVerifyCode">
				{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
			</button>
		</view>

		<!-- 登录按钮 -->
		<button class="login-btn" :disabled="!canLogin" @click="handleLogin">
			登录
		</button>

		<!-- 其他账号登录 -->
		<view class="other-login-area">
			<text class="other-login-title">—— 其他账号登录 ——</text>
			<view class="other-login-icons">
				<view class="flex flex-direction justify-center">
					<image src="/static/logo.png" mode="aspectFill" class="login-icon" @click="handleWechatLogin"
						alt="微信登录图标"></image>
					<view>注册</view>
				</view>
				<view class="flex flex-direction justify-center">
					<image src="/static/logo.png" mode="aspectFill" class="login-icon" @click="handleAppleLogin"
						alt="Apple登录图标"></image>
					<view>登录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue';

// 响应式数据
const phoneNumber = ref('');
const verifyCode = ref('');
const countdown = ref(0);
let countdownTimer: number | null = null;

// 手机号验证
const isPhoneValid = computed(() => {
	return /^1[3-9]\d{9}$/.test(phoneNumber.value);
});

// 登录按钮状态
const canLogin = computed(() => {
	return isPhoneValid.value && verifyCode.value.length === 6;
});

// 手机号输入处理
const handlePhoneInput = (e: Event) => {
	// 可以添加输入格式化等逻辑
	// const input = e.target as HTMLInputElement;
	// phoneNumber.value = input.value.replace(/\D/g, '').slice(0, 11);
	const target = e.target;
    if (target && 'value' in target) {
        const input = target as HTMLInputElement;
        phoneNumber.value = input.value.replace(/\D/g, '').slice(0, 11);
    }
};

// 获取验证码
const getVerifyCode = () => {
	if (!isPhoneValid.value) return;

	// 模拟获取验证码接口调用
	console.log(`向${phoneNumber.value}发送验证码`);
	uni.showToast({
		title: '验证码已发送',
		icon: 'none',
		duration: 2000
	});

	// 开始倒计时
	countdown.value = 5;
	countdownTimer = window.setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			clearInterval(countdownTimer as number);
			countdownTimer = null;
		}
	}, 1000);
};

// 登录处理
const handleLogin = () => {
	if (!canLogin.value) return;

	// 模拟登录接口调用
	console.log(`登录请求 - 手机号: ${phoneNumber.value}, 验证码: ${verifyCode.value}`);
	uni.showToast({
		title: '登录成功',
		icon: 'success',
	});
	// 这里可以添加路由跳转逻辑
	uni.reLaunch({
		url:'/pages/HeartIsland/index'
	})
};

// 微信登录
const handleWechatLogin = () => {
	console.log('触发账号注册');
	uni.navigateTo({
		url:'/pages/TreeHole/register'
	})
	// uni.showToast({
	// 	title: '微信登录功能待实现',
	// 	icon: 'none',
	// 	// duration: 2000
	// });
};

// Apple登录
const handleAppleLogin = () => {
	console.log('触发账号登录');
	uni.navigateTo({
		url:'/pages/TreeHole/loginPassword'
	})
	// uni.showToast({
	// 	title: 'Apple登录功能待实现',
	// 	icon: 'none',
	// 	// duration: 2000
	// });
};

// 清理定时器
onUnmounted(() => {
	if (countdownTimer) {
		clearInterval(countdownTimer);
	}
});
const handelBack = ()=>{
	uni.navigateBack({delta:1})
}
</script>

<style scoped>
page{
	background-color: white;
}
.login-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80rpx 30rpx 40rpx;
	min-height: 80vh;
	box-sizing: border-box;
}

.title-area {
	text-align: center;
	margin-bottom: 80rpx;
}

.title {
	font-size: 40rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 15rpx;
}

.sub-title {
	font-size: 26rpx;
	color: #666;
}

.input-area {
	display: flex;
	align-items: center;
	width: 100%;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 25rpx 30rpx;
	margin-bottom: 25rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.phone-prefix {
	font-size: 30rpx;
	color: #333;
	padding-right: 20rpx;
	border-right: 1px solid #eee;
}

.phone-input,
.verify-input {
	flex: 1;
	font-size: 30rpx;
	padding-left: 20rpx;
	height: 40rpx;
	line-height: 40rpx;
}

.get-code-btn {
	min-width: 200rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	color: #1aad19;
	background-color: transparent;
	padding: 0 20rpx;
}

.get-code-btn:disabled {
	color: #999;
}

.login-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #1aad19;
	color: #fff;
	font-size: 32rpx;
	margin: 40rpx 0 60rpx;
}

.login-btn:disabled {
	background-color: #ccc;
}

.other-login-area {
	text-align: center;
	margin-top: auto;
}

.other-login-title {
	font-size: 26rpx;
	color: #999;
	display: block;
	margin-bottom: 30rpx;
}

.other-login-icons {
	display: flex;
	justify-content: center;
	gap: 60rpx;
}

.login-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #fff;
	/* padding: 10rpx; */
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}
</style>
